<template>
  <div>
    <div class="head-container">
      <!-- 搜索 -->
      <el-input v-model="query.orderCode" clearable placeholder="输入工单编号" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
      <el-input v-model="query.customerName" clearable placeholder="输入客户名称" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
      <el-date-picker
        v-model="query.reportDate"
        type="date"
        format="yyyy-MM"
        value-format="yyyy-MM"
        style="width: 200px"
        placeholder="请选择时间"
        class="filter-item"
      />
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="init">搜索</el-button>
      <el-button class="filter-item" size="mini" type="primary" :loading="downloadLoading" @click="downloadMethod">导出</el-button>
    </div>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
      <el-table-column prop="orderCode" label="工单编号" />
      <el-table-column prop="customerName" label="客户名称" />
      <el-table-column prop="taskTitle" label="任务名称" />
      <el-table-column prop="taskAddr" label="详细地址" />
      <el-table-column prop="major" label="工程师类型" />
      <el-table-column prop="level" label="工程师等级" />
      <el-table-column prop="realServiceTime" label="工时" />
      <el-table-column prop="money" label="服务金额" />
      <el-table-column prop="evaluateTime" label="完工日期" />
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
import { download } from '@/api/data'
import { downloadFile } from '@/utils/index'
import initData from '@/mixins/initData'

export default {
  mixins: [initData],
  data() {
    return {
      downloadLoading: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    beforeInit() {
      this.url = 'api/tWorkOrder/customerreport'
      this.getParams()
      return true
    },
    getParams() {
      const sort = 'id,desc'
      this.params = { page: this.page, size: this.size, sort: sort }
      const query = this.query
      if (query.orderCode) {
        this.params.orderCode = query.orderCode
      }
      if (query.customerName) {
        this.params.customerName = query.customerName
      }
      if (query.reportDate) {
        this.params.reportDate = query.reportDate
      }
    },
    /**
     * 通用导出
     */
    downloadMethod() {
      this.beforeInit()
      this.downloadLoading = true
      download(this.url + '/export', this.params).then(result => {
        downloadFile(result, '甲方数据', 'xlsx')
        this.downloadLoading = false
      }).catch(() => {
        this.downloadLoading = false
      })
    }
  }
}
</script>
